<html>
<head></head>

<body>
  <h1>IMask Core Demo</h1>
  <input type="text" id="input">
  <div>value: <span id="value"></span></div>
  <div>unmasked: <span id="unmasked"></span></div>
  <div contenteditable="true" id="ce"></div>

  <script src="dist/imask.js"></script>
  <!-- <script src="https://unpkg.com/imask"></script> -->
  <script type="text/javascript">
    const opts = {
      mask: 'VLv\\alue MM',
      lazy: false, // make placeholder always visible

      blocks: {
        YY: {
          mask: '00',
        },

        VL: {
          mask: IMask.MaskedEnum,
          enum: ['TV', 'HD', 'VR'],
        },

        MM: {
          mask: IMask.MaskedRange,
          from: 1,
          to: 12,
        },
      },
    };

    const input = document.getElementById('input');
    var result = document.getElementById('value');
    var unmasked = document.getElementById('unmasked');
    var imask = IMask(input, opts).on('accept', () => {
      console.log('accept', imask.value, imask.unmaskedValue, imask.typedValue);
      result.innerHTML = imask.value;
      unmasked.innerHTML = imask.unmaskedValue;
    });

    // document.getElementById('input').addEventListener('focus', () => {
    //   imask.updateOptions({
    //     mask: mask.map((m) => ({
    //       ...m,
    //       lazy: false,
    //     })),
    //   });
    // });

    // document.getElementById('input').addEventListener('blur', () => {
    //   imask.updateOptions({
    //     mask: mask.map((m) => ({
    //       ...m,
    //       lazy: true,
    //     })),
    //   });
    // });

    // document.getElementById('input').addEventListener('blur', () => imask.updateOptions({lazy: true}));
    // document.getElementById('input').addEventListener('focus', () => imask.updateOptions({lazy: false}));
  </script>
</body>
</html>
